<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:rich="http://richfaces.org/rich"
    xmlns:a4j="http://richfaces.org/a4j">           


<ui:composition template="/resources/jsf/component/include/default.xhtml">
    
    <ui:define name="head">
        <ui:include src="/resources/jsf/component/composition/system/css/default.xhtml" />
        <ui:include src="/resources/jsf/component/composition/system/javascript/default.xhtml" />
        
    </ui:define>
    
    <ui:define name="left-content" >        
        <ui:include src="/resources/jsf/component/composition/user/profile/view-profile-user.xhtml" />
    </ui:define>

    <ui:define name="content">
        <h2>Perfil</h2>
        <h:form>
            <h:panelGrid>
                <h:link value="Mudar senha" outcome="/user/profile/password/change-password"/>
                <h:link value="Editar foto" outcome="/user/profile/picture/picture"/>
                <br/>
            </h:panelGrid>
        </h:form>
        
        <h:form id="form_user">
            <h:panelGrid columns="3">
                <h:outputLabel for="name" value="Nome:" />
                <h:inputText id="name" value="#{userc.personb.person.name}">
                    <f:ajax event="blur" listener="#{uv.name}" render="m_name" />
                </h:inputText>
                <rich:message id="m_name" for="name" ajaxRendered="false" />

                <h:outputLabel for="surname" value="Sobrenome:" />
                <h:inputText id="surname" value="#{userc.personb.person.surname}">
                    <f:ajax event="blur" listener="#{uv.surName}" render="m_surname" />
                </h:inputText>
                <rich:message id="m_surname" for="surname" ajaxRendered="false" />

                <h:outputLabel for="email" value="E-mail:" />
                <h:inputText id="email" value="#{userc.userb.user.email}">
                    <f:ajax event="blur" listener="#{uv.email}" render="m_email" />
                </h:inputText>
                <rich:message id="m_email" for="email" ajaxRendered="false" />

                <h:outputLabel for="gender" value="Eu sou:" />
                <h:selectOneMenu id="gender" value="#{userc.personb.person.gender}">
                    <f:selectItem itemLabel="Selecione seu gênero" />
                    <f:selectItem itemValue="M" itemLabel="Masculino" />
                    <f:selectItem itemValue="F" itemLabel="Feminino" />
                    <f:ajax event="blur" listener="#{uv.gender}" render="m_gender" />
                </h:selectOneMenu>
                <rich:message id="m_gender" for="gender" />

                <h:outputLabel for="birthdate" value="Data nascimento :" />
                <h:inputText id="birthdate" value="#{userc.personb.person.birthdate}" styleClass="date" converterMessage="dia/mês/ano">
                    <f:convertDateTime pattern="dd/MM/yyyy" />
                    <f:ajax event="blur" listener="#{uv.birthDate}" render="m_birthdate" />
                </h:inputText>
                <rich:message id="m_birthdate" for="birthdate" />

                <h:outputLabel for="facebook" value="Facebook:" />
                <h:inputText id="facebook" value="#{userc.userb.facebook}">
                    <f:ajax event="blur" listener="#{uv.facebook}" render="m_facebook" />
                </h:inputText>
                <rich:message id="m_facebook" for="facebook" ajaxRendered="false" />

                <h:outputLabel for="google_plus" value="Google+:" />
                <h:inputText id="google_plus" value="#{userc.userb.googlePlus}">
                    <f:ajax event="blur" listener="#{uv.google_plus}" render="m_google_plus" />
                </h:inputText>
                <rich:message id="m_google_plus" for="google_plus" ajaxRendered="false" />

                <h:outputLabel for="twitter" value="Twitter:" />
                <h:inputText id="twitter" value="#{userc.userb.twitter}">
                    <f:ajax event="blur" listener="#{uv.twitter}" render="m_twitter" />
                </h:inputText>
                <rich:message id="m_twitter" for="twitter" ajaxRendered="false" />

                <h:outputLabel for="website" value="Website:" />
                <h:inputText id="website" value="#{userc.userb.website}">
                    <f:ajax event="blur" listener="#{uv.website}" render="m_website" />
                </h:inputText>
                <rich:message id="m_website" for="website" ajaxRendered="false" />

                <h:outputLabel for="link" value="Outro:" />
                <h:inputText id="link" value="#{userc.userb.link}">
                    <f:ajax event="blur" listener="#{uv.link}" render="m_link" />
                </h:inputText>
                <rich:message id="m_link" for="link" ajaxRendered="false" />
                
                <h:commandButton value="Atualizar" action="#{userc.updatePerson}">
                    <f:ajax execute="@form" render="@form" />
                </h:commandButton>

                <a4j:status>
                    <f:facet name="start">
                        <h:graphicImage name="loader.gif" library="image" />
                    </f:facet>
                </a4j:status>
            </h:panelGrid>
            
            <br/>
            <br/>            
            <h:link value="Voltar" outcome="/user/home.xhtml"/>
            <ui:include src="/resources/jsf/component/composition/system/popup.xhtml" />
        </h:form>
        
    </ui:define> 
        
    <ui:define name="right-content" />

</ui:composition>
</html>